<template>
  <div class="account-box">
    <common-header :tittle="tittle"></common-header>
    <div class="info-box">
      <van-row>
        <van-col span="6">
          <div class="image-box">
            <img :src="cpdHeaderImage" alt="头像" class="imagebox-image" />
          </div>
        </van-col>
        <van-col span="18">
          <div class="imagebox-content">
            <div class="unlogin-box" v-show="!IS_LOGIN">
              <van-button round @click="login">登录</van-button>
            </div>
            <div class="login-box" v-show="IS_LOGIN">
              <span>
                {{ cpdNickName }}
              </span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="setting-box">
      <van-cell icon="paid" title="账户信息" is-link />
      <van-cell icon="question-o" title="帮助与反馈" is-link />
    </div>
    <div class="logout-box" v-show="IS_LOGIN">
      <van-button type="danger" block @click="logout">退出登录</van-button>
    </div>
  </div>
</template>

<script>
// import { mapMutations, mapGetters, mapState } from 'vuex'
import { mapGetters, mapMutations } from 'vuex'
import api from '@/fetch/api.js'
import commonHeader from '@/components/common-header'
export default {
  data () {
    return {
      tittle: '账户管理'
      // headerImage: this.cpdHeaderImage,
      // nickname: this.cpdNickName
    }
  },
  created () {
    if (this.IS_LOGIN && (this.userInfo == null || this.userInfo.userName == null)) {
      api.userInfo().then(resp => {
        this.RECORD_USERINFO(resp.data.data)
        // this.headerImage = resp.data.data.headImg
        // this.nickname = resp.data.data.nickname
      }).catch(error => {
        console.log(error)
      })
    }
  },
  methods: {
    ...mapMutations([
      'RECORD_USERINFO',
      'OUT_LOGIN'
    ]),
    todetail () {
      this.$router.togo('/Home/Detail')
    },
    login () {
      console.log('登录')
      this.$router.push('/login')
    },
    logout () {
      this.OUT_LOGIN()
      // this.IS_LOGIN = false
    }
  },
  components: {
    commonHeader
  },
  computed: {
    ...mapGetters([
      'IS_LOGIN',
      'USER_INFO'
    ]),
    cpdHeaderImage: function () {
      console.log(this.USER_INFO)
      if (!this.IS_LOGIN || this.USER_INFO == null || this.USER_INFO.username == null) {
        return 'https://leven-test-bucket.nos-eastchina1.126.net/reader/bird.png'
      }
      return this.USER_INFO.headImg
    },
    cpdNickName: function () {
      if (this.USER_INFO == null) {
        return ''
      } else {
        return this.USER_INFO.nickname
      }
    }
    // ...mapState({
    //   number: state => state.home.number
    // })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/styles/index.less";
@import "~@/styles/variable.less";

.account-box {
  background-color: white;

  .info-box {
    margin-top: 20px;

    .imagebox-image {
      height: 50px;
      border-radius: 50px;
    }
    .imagebox-content {
      text-align: left;

      .login-box {
        span {
          font-size: 18px;
          font-weight: bolder;
        }
      }
    }
  }

  .setting-box {
    text-align: left;
    margin-top: 20px;

    .van-icon {
      font-size: 20px;
    }
  }
  .logout-box {
    margin-top: 30px;
  }
}
</style>
